<template>
	<view class="replacement">
		<view class="replacement_order">
			<image
				class="replacement_img"
				:src="orderBackInfo.originalImg | formatUrl" mode=""
			></image>
			<view class="replacement_info">
				<view class="replacement_name">{{orderBackInfo.goodsName}}</view>
				<view class="replacement_desc">{{orderBackInfo.goodsAttr}}</view>
			</view>
		</view>
		<view class="replacement_method" v-show="!select">
			<view class="replacement_item" v-for="(item, index) in desc" :key="index" @click="goto(item.to)">
				<view class="icon" style="margin: 0px 10px 0px 0px;" v-show="index === 0" >&#xe639;</view>
				<view class="icon" style="margin: 0px 10px 0px 0px;" v-show="index === 1" >&#xe634;</view>
				<view class="icon" style="margin: 0px 10px 0px 0px;" v-show="index === 2" >&#xe636;</view>
				<view class="replacement_right" >
					<view class="replacement_text">
						<view class="replacement_title">{{item.title}}</view>
						<view class="replacement_desc">{{item.desc}}</view>	
					</view>
					<view class="icon" style="color: #a7a6a6; font-size: 32upx;">&#xe62d;</view>
				</view>
			</view>
		</view>
		<view class="replacement_commit" v-show="select">
			<view class="replacement_first" v-show="select !== 'exchange'">
				<view class="replacement_reason">
					<view class="replacement_status" style="border-bottom: 1px solid #ece7e7;" @tap="show('goodsStatus')">
						<view class="replacement_status_text">退换数量</view>
						<view class="number">
							<view class="sub" @tap.stop="sub">
								<view class="icon">&#xe6aa;</view>
							</view>
							<view class="input">
								<input type="number" disabled v-model="goodsCount" />
							</view>
							<view class="add"  @tap.stop="add">
								<view class="icon">&#xe656;</view>
							</view>
						</view>
					</view>
					<view class="replacement_status" style="border-bottom: 1px solid #ece7e7; margin-top: 10px;" @tap="show('goodsStatus')">
						<view class="replacement_status_text">货物状态</view>
						<view style="color: #a7a6a6;" class="replacement_text">
						{{goods_status.find(item => item.value === goodsStatus) ? goods_status.find(item => item.value === goodsStatus).text : '请选择'}}
						<view class="icon" style="color: #a7a6a6; font-size: 28upx; margin-left: 8px">&#xe62d;</view></view>
					</view>
					<view class="replacement_status" style="margin-top: 10px;" @tap="show('reason')">
						<view class="replacement_status_text">退款原因</view>
						<view style="color: #a7a6a6;" class="replacement_text">
							{{reason !== 0 ? reasons.find(item => item.value === reason).title : '请选择'}}
							<view class="icon" style="color: #a7a6a6; font-size: 28upx; margin-left: 8px">&#xe62d;</view>
							</view>
					</view>
				</view>
			</view>
			<view class="replacement_first"  v-show="select !== 'exchange'">
				<view class="replacement_pay">
					<view class="replacement_status" style="border-bottom: 1px solid #ece7e7;">
						<view class="replacement_status_text">退款金额</view>
						<view style="color: #E80505; display: flex;">¥ &nbsp;&nbsp;&nbsp;<input type="number" :value="backAmount" @input="setBackAmount($event)"/></view>
					</view>
					<view class="replacement_status" style="margin-top: 10px;">
						<view class="replacement_status_text">退款说明</view>
						<input placeholder="选填" style="color: #a7a6a6; flex:1;" :v-modal="backDes" @input="setDes($event)"/>
					</view>
				</view>
			</view>
			<view class="replacement_first" v-show="select === 'exchange'">
				<view class="replacement_reason">
						<view class="replacement_status" style="margin-top: 10px;" @tap="show('reason')">
						<view class="replacement_status_text">换货原因</view>
						<view style="color: #a7a6a6;" class="replacement_text">
							{{reason !== 0 ? reasons.find(item => item.value === reason).title : '请选择'}}
							<view class="icon" style="color: #a7a6a6; font-size: 28upx; margin-left: 8px">&#xe62d;</view>
							</view>
					</view>
				</view>
			</view>
			<view class="replacement_first">
				<view class="replacement_pay">
				<view>上传凭证</view>
				<choose :count="count" :imgList="imgList"  :imgUploaded="imgUploaded" @changes="fileChange(arguments)"></choose>
				</view>
			</view>
		</view>
		<button type="primary" class="feedback-submit" @tap="send" v-show="select">提交</button>
		<popup-layer ref="popupRef" :direction="'top'" v-model="boolShow">
			<view class="replacement_box" >
				<view class="replacement_box_title">{{['货物状态' ,'退款原因', '换货原因'][modalClass - 1] }}</view>
				<view :key="index" class="replacement_box_item" v-for="(item, index) in goods_status" v-show="modalClass === 1">
					<view class="replacement_box_text">{{item.text}}</view>
					<!-- checkbox --> 
					<view class="checkbox-box" @tap="selected('goodsStatus', item.value)">
						<view class="checkbox">
							<view :class="[goodsStatus === item.value?'on':'']"></view>
						</view>
					</view>
				</view>
				 <scroll-view 
					:scroll-top="scrollTop"
					scroll-y="true"
					style="height: 100%;"
				>
					<view class="replacement_box_item" v-for="(item, index) in reasons" v-show="modalClass !== 1" :key="index">
							<view class="replacement_box_text">{{item.title}}</view>
						<!-- checkbox --> 
						<view class="checkbox-box" @tap="selected('reason', item.value)">
							<view class="checkbox">
								<view :class="[reason === item.value ? 'on' : '']"></view>
							</view>
						</view>
					</view>
				</scroll-view>
			    <button type="primary" class="feedback-submit replacement_button" @tap="close" >关闭</button>
			</view>
		</popup-layer>
	</view>
</template>

<script>
	import choose from "@/components/image/choose.vue"
	import popupLayer from '@/components/popup-layer/popup-layer.vue';
	import { mapState } from 'vuex';
	import base from '@/common/services/base.js'; // 导入http中创建的axios实例
	import otherApis from '@/common/services/other.js';
	import orderApis from '@/common/services/order.js'
	import {getCookie} from '@/utils/cookiesUtil.js'
	const difference = require("lodash.difference") 
	const cloneDeep = require("lodash.clonedeep")
	const apiUrl = base.test;
	export default {
		data() {
			return {
				desc : [
					{ title: '我要退款（无需退货)', desc: '没有收到货，或与卖家协商同意不用退货只退款', to: 'refund'},
					{ title: '我要退货退款', desc: '已收到货，需要退还收到的货物', to: 'return'},
					{ title: '我要换货', desc: '已经收到货，需要更换已经收到的货物', to: 'exchange'},
				],
				item: {id:1,type: 1, img:'/static/product/gai.jpg',name:'华好钙臻·离子钙',spec:'[精品礼盒装] 10kg',price:159,number:1},
				select: '',
				imgList: [],
				imgUploaded: [],
				count:3,
				boolShow:false,
				goods_status: [], // 商品状态～～
				goodsStatus: 0, // 0 未选择状态， 1 未收到货 2 已收到货
				modalClass: 1, // 弹出框的内容： 1 为货物状态； 2 为退款原因 3 换货原因
				refundReason: [
				],
				exchangeReason: [
					{value: 1, title: '7天无理由退换货', text: '7天无理由退换货'},	
				],
				reason: 0,
				scrollTop: 0,
				orderId: '',
				backDes: '', // 退货说明～
				backAmount: '', // 退款金额
				goodsCount: 0, // 退换数量
			}
		},
		filters: {
			formatUrl: function(url) {
				return url && url.indexOf('http') !== -1 ? url : 'http://106.13.76.109:8080/xsmall/sys/common/view/'+ url
			}
		},
		computed:{
			reasons: function() {
				return this.modalClass === 3 ? [
					this.exchangeReason,	
				] : this.refundReason;
			},
			orderBackInfo: function() {
				return this.orderId && this.$store.getters.orderBackInfo(this.orderId)
			},
		},
		methods:{
			setBackAmount(e) {
				const maxPrice = this.orderBackInfo.shopPrice * this.orderBackInfo.goodsNumber
				let value = e.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
				if (maxPrice < e.target.value * 1) {
					uni.showModal({
						title: '提示',
						confirmColor: '#A2313E',
						content: '退款的金额不能大于订单商品的总额',
						cancelColor: '#666'
					})
					value = maxPrice + '';
				}
				setTimeout(() => {
					console.log('value:', value)
					this.backAmount = value;
				}, 0)
			},
			// 设置退款说明
			setDes(e) {
				this.backDes = e.detail.value;
				
			},
			goto(type) {
				if (type === 'refund') {
					uni.setNavigationBarTitle({
					　　title: '申请退款',
					})
					console.log('type；', type)
				} else if (type === 'return'){
					uni.setNavigationBarTitle({
					　　title: '申请退货退款'
					})	
				} else {
					uni.setNavigationBarTitle({
					　　title: '申请换货'
					})	
				}
				this.select = type;
			},
            fileChange(arg){
				const e = arg[0]
				if (this.imgList.length < e.length) {
					const array1 = difference(e, this.imgList);
					array1.forEach(item => {
						uni.uploadFile({
						  	url: `${apiUrl}/sys/common/upload`,
							header: {
								'X-Access-Token': getCookie('token')
							},
						  	filePath: item,
						  	name: 'file',
						  	success: res => {
								const data = JSON.parse(res.data)
								if (data.message === 'Token失效，请重新登录') {
									uni.showToast({
										icon: 'none',
										title: data.message
									})
									setTimeout(() => {
										uni.navigateTo({
											url: '../login/login'
										})
									}, 500)
								} else {
									const url = otherApis.getImgPreview + data.message;
									this.imgUploaded.push(url)
								}
						  	},
							fail: res => {
								uni.showToast({
									icon: 'none',
									title: res.errMsg,
								})
							}
						  });
					})
					this.imgList  =cloneDeep(e)
				}
				if (arg[1] !== undefined) {
					this.imgUploaded.splice(arg[1], 1)
				}
            },
			send() {
				let backImgs = ''
				let len = this.imgUploaded.length;
				this.imgUploaded.map((item, index) => {
					console.log('item:', item)
					backImgs = backImgs + item + (index !== len - 1 && len > 1 ? ',': '');
				})
				orderApis.orderBack({
					orderId: this.orderId,
					goodsCount: this.goodsCount,
					goodsStatus: this.goodsStatus,
					backType: this.desc.find(item => item.to === this.select) && this.desc.find(item => item.to === this.select).value,
					backReason: this.reason,
					backDes: this.backDes,
					backAmount: this.backAmount,
					backImgs
				}).then(res => {
					uni.navigateTo({
						url: '../myOrder/myOrder?state=1'
					})
				})
				uni.showToast({
					icon: 'none',
					title: '申请提交成功！'
				})
			},
			show(type){
				if (type === 'goodsStatus') {
					this.modalClass = 1;
				} else if (type === 'reason' && this.select !== 'exchange'){
					this.modalClass = 2;
				}  else {
					this.modalClass = 3;
				}
                this.$refs.popupRef.show(); // 或者 boolShow = rue
            },
            close(){
                this.$refs.popupRef.close();// 或者 boolShow = false
            },
			selected(type, vaule){
				if (type === 'goodsStatus') {
					this.goodsStatus = vaule;
				} else if (type === 'reason'){
					this.reason = vaule;
				}
				this.close();
			},
			//减少数量
			sub(){
				if(this.goodsCount<=1){
					return;
				}
				this.backAmount = (this.goodsCount - 1) * this.orderBackInfo.goodsPrice;
				this.goodsCount--;
			},
			//增加数量
			add(){
				if(this.goodsCount >= this.orderBackInfo.goodsNumber) {
					uni.showModal({
						title: '提示',
						confirmColor: '#A2313E',
						content: '退换数量不能大于商品总数量',
						cancelColor: '#666'
					})
					return false;
				}
				this.backAmount = (this.goodsCount* 1 + 1) * this.orderBackInfo.goodsPrice* 1;
				this.goodsCount++;
			},
		},
		components:{
			choose,
			popupLayer
		},
		onLoad(option) {
			// 退换货类型 
			otherApis.getUnicode('back_type').then(res => {
				this.desc = this.desc.map((item, index) => {
					item.value = res[index].value
					return item;
				})
			})
			// 货物状态编码
			otherApis.getUnicode('goods_status').then(res => {
				this.goods_status = res
			})
			// 退款退货的原因
			otherApis.getUnicode('back_reason').then(res => {
				this.refundReason = res
			})
			this.orderId = option.orderId;
			this.backAmount = this.orderBackInfo && this.orderBackInfo.goodsNumber * this.orderBackInfo.shopPrice;
			this.goodsCount = this.orderBackInfo && this.orderBackInfo.goodsNumber;
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url('../../css/font/iconfont.eot');
		src: url('../../css/font/iconfont.eot?#iefix') format('embedded-opentype'),
		url('../../css/font/iconfont.woff') format('woff'),
		url('../../css/font/iconfont.ttf') format('truetype'),
		url('../../css/font/iconfont.svg#iconfont') format('svg');
	}
	.icon {
			font-family:"iconfont" !important;
			font-size: 48upx;
			font-weight: 200;
			font-style:normal;
			-webkit-font-smoothing: antialiased;
			-webkit-text-stroke-width: 0.2px;
			-moz-osx-font-smoothing: grayscale;
			color:linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
	}
	page {
		background-color: #f8f8f8;
	}
	.replacement {
		width: 100%;
		.replacement_order {
			width: 100%;
			display: flex;
			height: 160upx;
			background: white;
			padding: 20upx;
			box-sizing: border-box;
			.replacement_img {
				width: 120upx;
				height: 120upx;
				margin-right: 10upx;
			}
			.replacement_info {
				display: flex;
				flex-direction: column;
				.replacement_title {
					font-size: 28upx;
				}
				.replacement_desc {
					color: #a7a6a6;
					margin-top: 10upx;
					font-size: 24upx;
				}
			}
		}
		.replacement_method {
			width: 100%;
			margin-top: 20upx;
			background: white;
			.replacement_item {
				display: flex;
				width: 100%;
				padding: 20upx;
				box-sizing: border-box;
				border-bottom: 1px solid #ece7e7;
				.replacement_right {
					display: flex;
					flex: 1;
					justify-content: space-between;
					.replacement_text {
						display: flex;
						flex-direction: column;
						.replacement_title {
							font-size: 28upx;
						}
						.replacement_desc {
							font-size: 24upx;
							margin-top: 6upx;
							color: #a7a6a6;
						}
					}
				}
			}
		}
		.replacement_commit {
			width: 100%;
			font-size: 28upx;
			.replacement_first {
				padding: 20upx;
				box-sizing: border-box;
				background-color: white;
				margin-top: 20upx;
				.replacement_pay {
					margin-top: 20upx;
					.replacement_status {
						display: flex;
						align-items: center;
						padding: 0upx 0upx 20upx;
						.replacement_status_text {
							display: flex;
							align-items: center;
							margin-right: 20upx;
							input {
								height: 100%;
								font-size: 12px;
							}
						}
					}
				}
				.replacement_reason {
					display: flex;
					flex-direction: column;
					.replacement_status {
						display: flex;
						justify-content: space-between;
						padding: 0upx 0upx 20upx;
						.number{
							display: flex;
							justify-content: center;
							align-items: center;
							.input{
								width: 60upx;
								height: 60upx;
								margin: 0 10upx;
								background-color: #f3f3f3;
								display: flex;
								justify-content: center;
								align-items: center;
								text-align: center;
								input{
									width: 80upx;
									height: 60upx;
									display: flex;
									justify-content: center;
									align-items: center;
									text-align: center;
									font-size: 26upx;
								}
							}
							
							.sub ,.add{
								width: 50upx;
								height: 50upx;
								background-color: #f3f3f3;
								border-radius: 5upx;
								.icon{
									font-size: 25upx;
									width: 50upx;
									height: 50upx;
									display: flex;
									justify-content: center;
									align-items: center;
									
								}
							}
						}
						.replacement_text {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 26upx;
						}
					}
				}
			}
		}
		.feedback-submit {
			box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.4);
			margin: 20upx auto;
			height: 80upx;
			background-color: #E80505;
			color: #fff;
			justify-content: center;
			align-items: center;
			&:hover {
				background-color: #862732;
			}
		 }
	}
	.replacement_box {
		width: 100%;
		height: 800upx;
		display: flex;
		flex-direction: column;
		padding: 0upx 20upx 180upx;;
		box-sizing: border-box;
		.replacement_button {
			position: fixed;
			bottom: 0;
			width: 95%
		}
		.replacement_box_title {
			display: flex;
			align-items: center;
			font-size: 30upx;
			text-align: center;
			margin-top: 20upx;
			justify-content: center;
		}
		.replacement_box_item {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ece7e7;
			padding: 20upx 0upx;
			&:last-child {
				border-bottom: 0px solid #ece7e7;
			}
			.checkbox-box{
				display: flex;
				align-items: center;
				width: 30upx;
				height: 30upx;
				.checkbox{
					width: 30upx;
					height: 30upx;
					border-radius: 100%;
					border: solid 1upx #E80505;
					display: flex;
					align-items: center;
					justify-content: center;
					.on{
						width: 24upx;
						height: 24upx;
						border-radius: 100%;
						background-color:linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
						align-self: center;
						justify-content: center;
					}
				}
				.text{
					font-size: 28upx;
					margin-left: 10upx;
				}
			}
		}
	}


</style>
